<template>
    <div class="parcel-label-container">
        <!-- 顶部红色栏：eParcel + Australia Post -->
        <header class="text-center top-bar bg-black text-white py-2 px-4 flex justify-center items-center">
            <span class="text-red">NICE</span>PATCHES
        </header>

        <!-- 主体内容区 -->
        <div class="p-4">
            Invoice From "NICE PATCHES"
            <v-divider color="blue" class="my-10px"></v-divider>
            <div class="flex justify-between mb-4">
                <div>
                    <p class="font-bold">Order Summary</p>
                    <p>Project ID: N87321</p>
                    <p>Product: Customize Embroidered Patches</p>
                    <p>Size: 13.5 inches high x 13.5 inches wide</p>
                    <p>Quantity: 50000 pieces</p>
                </div>
                <div class="text-right">
                    <p>PHONE 0404799464</p>
                    <img src="/image copy.png" alt="QR Code" class="w-150px h-150px mt-2" />
                </div>
            </div>
            <v-divider color="blue" class="my-10px"></v-divider>
            <div class="mb-2">
                <p class="font-bold">Special Options</p>
                <div class="font-normal">
                    <div class="flex justify-between items-center mb-2">
                        <span>75% Embroidery Coverage:</span>
                        <div class="text-center w-100px text-sm">
                            free
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <span>Iron - on Backing:</span>
                        <div class="text-center w-100px text-sm">
                            <div>$0.14</div>
                            <div class="text-blue">$0.15/piece</div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <span>Polyester Blend Twill:</span>
                        <div class="text-center w-100px text-sm">
                            <div>$0.14</div>
                            <div class="text-blue">$0.15/piece</div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <span>Merrowed Border:</span>
                        <div class="text-center w-100px text-sm">
                            <div>$0.14</div>
                            <div class="text-blue">$0.15/piece</div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <span>Metallic Thread (Golden yellow):</span>
                        <div class="text-center w-100px text-sm">
                            <div>$0.14</div>
                            <div class="text-blue">$0.15/piece</div>
                        </div>
                    </div>
                </div>
            </div>
            <v-divider color="blue" class="my-10px"></v-divider>
            <div class="mb-2">
                <p class="font-bold">Shipping & Production</p>
                <div class="flex items-center my-4">
                    <div class=" flex items-center justify-center mr-20px">
                        <img src="/transport.png" class="w-40px h-22px" alt="">
                    </div>
                    <div class="flex-1 text-18px">
                        <p class="text-[rgb(107,114,128)]">Free shipping</p>
                        <p class="font-bold">Wed, May 21</p>
                    </div>
                    <div class="mx-4 text-gray-300 bg-black flex-1 w-0 h-1px"></div>
                    <div class="flex-1 text-right text-18px">
                        <p class="text-[rgb(107,114,128)]">Fastest</p>
                        <p class="font-bold">Wed, Apr 30</p>
                    </div>
                </div>
            </div>
            <v-divider color="blue" class="my-10px"></v-divider>
            <div class="w-full py-1 flex justify-between items-center mx-left">
                <div class="flex items-center mb-2">
                    <span class="font-bold">Total</span>
                </div>
                <div class="font-bold">
                    <div class="relative inline-block">
                        <div
                            class="absolute top-[50%] left-[50%] w-[120%] transform -translate-x-[50%] h-[1px] bg-gray-500">
                        </div>
                        $123131.2
                    </div>
                    <div class="text-[rgb(107,114,128)] text-[12px] font-normal">
                        $123131.2
                    </div>
                </div>
                <span class="font-bold flex items-center justify-center">
                    <img src="/testImgs/icon/50-percent.png" class="w-50px h-50px object-cover inline-block mr-2"
                        alt="折扣标签" />
                    <div class="font-bold">
                        $758
                        <div class="text-blue-400 text-[12px] font-normal">
                            $123131.2
                        </div>
                    </div>
                </span>
            </div>
            <v-divider color="blue" class="my-10px"></v-divider>
            <div class="mb-2">
                <p class="font-bold">Message</p>
                <p class="text-14px text-[rgb(107,114,128)]">
                    Experience the timeless charm and durability of embroidered patches, perfect for organizations,
                    teams, or personal collections. Our patches combine traditional craftsmanship with modern design,
                    offering vibrant and long - lasting decorations that showcase both quality and style. Stand out with
                    a classic look that never goes out of fashion.
                </p>
            </div>
            <v-divider color="blue" class="my-10px"></v-divider>
            <div class="text-center flex justify-center ">
                <div>
                    <h2 class="text-2xl font-bold mb-1">Contact Us</h2>
                    <div class="bg-black text-white py-2 px-6 inline-block mb-4 font-bold text-3xl">
                        <span class="text-red-500">NICE</span><span class="text-white">PATCHES</span>
                    </div>
                </div>
                <div class="mb-6 font-medium text-sm text-[rgb(75,85,99)] w-450px mx-auto">
                    <div class="mb-1">www.nicepatches.com</div>
                    <div class="mb-1">Call: +86 186 8863 4274</div>
                    <div class="mb-1">Email: sales@nicepatches.com</div>
                    <div>Customer representative general manager Lisa</div>
                    <div class="text-[rgb(75,85,99)] mb-4 max-w-lg mx-auto text-sm">
                        Thank you so much for choosing nicecustomize.Sincerely hope we could continue to provide you
                        with excellent service.
                    </div>
                    <div class="mb-0">Have a great day,</div>
                    <div class="mb-0">Best regards,</div>
                    <div class="mb-0">Lisa</div>
                    <div class="font-bold text-lg">Thank you for your business!</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 若需要逻辑（如动态数据），可在此添加
</script>

<style scoped>
/* 可选：局部样式补充（主要依赖 UnoCSS 工具类，此处仅容器基础样式） */
.parcel-label-container {
    /* max-width: 600px; */
    /* padding-bottom: 100px; */
    margin: 0 auto;
    font-family: Arial, sans-serif;
}
</style>